<!DOCTYPE html>
<html>
<head lang="en">
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css"> -->
<script src="js/jquery-1.8.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.scrollUp.min.js" type="text/javascript" charset="utf-8"></script>
<!-- <script src="js/ui.core.js" type="text/javascript" charset="utf-8"></script> -->
<script src="js/jquery.scrollfollow.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
body{
    background-color: #f3f3f3;
}
#myaffix {
    position:absolute;
    left: 10px;
    top: 80px;
}
#myaffix ul {  
    background-color: #FFFFFF;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
    padding: 0;
    width: 150px;
}
#myaffix ul li a{
    border: 1px solid #E5E5E5;
    display: block;
    margin: 0 0 -1px;
    padding: 14px 24px;
}

#myaffix ul li a i{
    float: right;
}

#scrollUp {
    bottom: 20px;
    right: 20px;
}


</style>

<script type="text/javascript">
    $( document ).ready( function ()
        {
        $( '#myaffix' ).scrollFollow();
        }
    ); 
</script>
</head>
<body>
<div class="row well">
    <div class="span4 offset1">Hello, world!</div>
    <div class="span8">
        <div class="row">
            <div class="span3">span3</div>
            <div class="span5">span5</div>
        </div>
    </div>
</div>
<div class="container">
    <!-- 表格 -->
    <table class="table table-bordered table-hover">
      <thead>
        <tr>
          <th>#</th>
          <th>Product</th>
          <th>Payment Taken</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        <tr class="success">
          <td>1</td>
          <td>TB - Monthly</td>
          <td>01/04/2012</td>
          <td>Approved</td>
        </tr>
        <tr class="error">
          <td>2</td>
          <td>TB - Monthly</td>
          <td>02/04/2012</td>
          <td>Declined</td>
        </tr>
        <tr class="warning">
          <td>3</td>
          <td>TB - Monthly</td>
          <td>03/04/2012</td>
          <td>Pending</td>
        </tr>
        <tr class="info">
          <td>4</td>
          <td>TB - Monthly</td>
          <td>04/04/2012</td>
          <td>Call in to confirm</td>
        </tr>
      </tbody>
    </table>
    <!-- 基本表单 -->
    <form>
    <fieldset>
    <legend>Legend</legend>
    <label>Label name</label>
    <input type="text" placeholder="Type something…">
    <span class="help-block">Example block-level help text here.</span>
    <label class="checkbox">
    <input type="checkbox"> Check me out
    </label>
    <button type="submit" class="btn btn-primary btn-large">Submit</button>
    </fieldset>
    </form>
    <!-- 搜索表单 -->
    <form class="form_search">
        <input type="text" class="input-mediun search-query"/>
        <button type="submit" class="btn">Search</button>
    </form>
    <!-- 行内表单 -->
    <form class="form-inline">
    <input type="text" class="input-small" placeholder="Email">
    <input type="password" class="input-small" placeholder="Password">
    <label class="checkbox">
    <input type="checkbox"> Remember me
    </label>
    <button type="submit" class="btn">Sign in</button>
    </form>
    <!-- 水平表单 -->
    <form class="form-horizontal">
    <div class="control-group">
    <div class="controls">
        <div class="input-prepend">
            <span class="add-on"><i class="icon-envelope"></i></span>
            <input type="text" id="inputEmail" placeholder="Email">
        </div>
        <span class="help-inline">help info</span>
    </div>
    </div>
    <div class="control-group">
    <label class="control-label" for="inputPassword">Password</label>
    <div class="controls">
    <input type="password" id="inputPassword" placeholder="Password">
    <span class="help-block">help info</span>
    </div>
    </div>
    <div class="control-group">
    <div class="controls">
    <label class="checkbox">
    <input type="checkbox"> Remember me
    </label>
    <!-- <button type="submit" class="btn">Sign in</button> -->
    </div>
    </div>
    <div class="form-actions">
    <button type="submit" class="btn btn-primary" disabled><i class="icon-ok"></i>Save changes</button>
    <button type="reset" class="btn">Cancel</button>
    </div>
    </form>
    <!-- 复选框和单选框 -->
    <label class="checkbox">
    <input type="checkbox" value="">
    Option one is this and that—be sure to include why it's great
    </label>
     
    <label class="radio">
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that—be sure to include why it's great
    </label>
    <label class="radio">
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
    </label>
    <!-- 行内复选框 -->
    <label class="checkbox inline">
    <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
    </label>
    <label class="checkbox inline">
    <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
    </label>
    <label class="checkbox inline">
    <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
    </label>
    <!-- 扩展表单组件 -->
    <div class="input-prepend">
    <span class="add-on">@</span>
    <input class="span2" id="prependedInput" type="text" placeholder="Username">
    </div>
    <div class="input-append">
    <input class="span2" id="appendedInput" type="text">
    <span class="add-on">.00</span>
    </div>
    <!-- 扩展表单组件-组合 -->
    <div class="input-prepend input-append">
    <span class="add-on">$</span>
    <input class="span2" id="appendedPrependedInput" type="text">
    <span class="add-on">.00</span>
    </div>
    <!-- 扩展表单组件-按钮 -->
    <div class="input-append">
    <input class="span2" id="appendedInputButton" type="text">
    <button class="btn" type="button">Go!</button>
    </div>

    <div class="input-append">
    <input class="span2" id="appendedInputButtons" type="text">
    <button class="btn" type="button">Search</button>
    <button class="btn" type="button">Options</button>
    </div>

    <!-- 按钮下拉菜单 -->
    <div class="input-append">
    <input class="span2" id="appendedDropdownButton" type="text">
    <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
    Action
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
    <li><a>Action</a></li>
    <li class="dropdown-submenu">
        <a >子菜单</a>
        <ul class="dropdown-menu">
            <li><a>Action1</a></li>
            <li><a>Action2</a></li>
        </ul>
    </li>
    </ul>
    </div>
    </div>

    <div class="input-prepend">
    <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
    Action
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
    <li><a>Action</a></li>
    </ul>
    </div>
    <input class="span2" id="prependedDropdownButton" type="text">
    </div>

    <div class="input-prepend input-append">
    <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
    Action
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
    <li><a>Action</a></li>
    </ul>
    </div>
    <input class="span2" id="appendedPrependedDropdownButton" type="text">
    <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
    Action
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
    <li><a>Action</a></li>
    </ul>
    </div>
    </div>

    <!-- 分段式下拉菜单组 -->
    <form>
    <div class="input-prepend">
    <div class="btn-group">
        <button class="btn">Action</button>
        <button class="btn dropdown-toggle" data-toggle="dropdown">
        Action
        <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
        <li><a>Action</a></li>
        </ul>
    </div>
    <input type="text">
    </div>
    <div class="input-append">
    <input type="text">
    <div class="btn-group">
        <button class="btn">Action</button>
    </div>
    </div>
    </form>

    <!-- 搜索表单 -->
    <form class="form-search">
    <div class="input-append">
    <input type="text" class="span2 search-query">
    <button type="submit" class="btn">Search</button>
    </div>
    <div class="input-prepend">
    <button type="submit" class="btn">Search</button>
    <input type="text" class="span2 search-query">
    </div>
    </form>

    <!-- 下拉菜单 -->
    <div class="btn-group">
        <button class="btn btn-large btn-primary dropdown-taggle" data-toggle="dropdown">
                
        <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu">
        <li><a tabindex="-1" href="#">Regular link</a></li>
        <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Another link</a></li>
        </ul>
    </div>

    <!-- 按钮组 -->
    <div class="btn-group btn-group-vertical">
    <button class="btn span2 btn-primary">Left</button>
    <button class="btn span2 btn-info">Middle</button>
    <button class="btn span2 btn-success">Right</button>
    </div>

    <!-- 向上弹出菜单 -->
    <div class="btn-group dropup">
    <button class="btn">Dropup</button>
    <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
    <li><a href="">action1</a></li>
    </ul>
    </div>

    <!-- 基本标签页 -->
    <ul class="nav nav-tabs">
    <li class="active"><a href="">首页</a></li>
    <li class="active"><a href="">第二页</a></li>
    <li class="disabled"><a href="">第三页</a></li>
    </ul>

    <!-- 基本pills -->
    <ul class="nav nav-pills">
    <li class="active"><a href="">首页</a></li>
    <li class="active"><a href="">第二页</a></li>
    <li><a href="">第三页</a></li>
    </ul>   

    <!-- 导航列表 -->
    <ul class="nav nav-list">
    <li class="nav-header">List header</li>
    <li class="active"><a href="#">首页</a></li>
    <li><a href="#">Library</a></li>
    <li class="divider"></li> <!-- 水平分割线 -->
    <li><a href="#">Action1</a></li>
    <li><a href="#">Action2</a></li>
    <li><a href="#">Action3</a></li>
    <li class="nav-header">Action header</li>
    <li><a href="#">Action1</a></li>
    <li><a href="#">Action1</a></li>
    </ul>

    <!-- 标签页式导航 -->
    <div class="tabbable tabs-left"> <!-- Only required for left/right tabs -->
    <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
    </ul>
    <div class="tab-content">
    <div class="tab-pane active" id="tab1">
    <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
    <p>Howdy, I'm in Section 2.</p>
    </div>
    </div>
    </div>

    <!-- 基本样式导航条 -->
    <div class="navbar">
    <div class="navbar-inner">
    <a class="brand" href="#">Title</a>
    <ul class="nav">
    <li class="active"><a href="#">首页</a></li><li class="divider-vertical"></li>
    <li><a href="#">Link</a></li><li class="divider-vertical"></li>  <!-- 分隔符 -->
    <li><a href="#">Link</a></li>
    </ul>
    </div>
    </div>

    <!-- 导航条组件 -->
    <div class="navbar">
        <div class="navbar-inner">
            <ul class="nav">
            <a class="brand" href="#">Project name</a>
            <li class="active"><a href="#">Action</a></li>
            </ul>           
        </div>

    </div>


    <!-- 导航条中 表单 -->
    <div class="navbar">
        <div class="navbar-inner">
        <ul class="nav">
        <li class="active">
        <a href="#">首页</a>
        </li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <form class="navbar-form pull-right">
        <input type="text" class="span2">
        <button type="submit" class="btn">Submit</button>
        </form>
        <li><a href="#">Link</a></li>
        <form class="navbar-search pull-left">
        <input type="text" class="search-query" placeholder="Search">
        <button class="btn" style="position: relative;top:-5px;">搜索</button>
        </form>
        <li><a href="#">Link123</a></li>
        </ul>           
        </div>
    </div>

    <!-- 顶部导航条,不随页面滚动 -->
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
        <ul class="nav">
        <a class="brand" href="#">Project name</a>
        <li class="active">
        <a href="#">首页</a>
        </li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <form class="navbar-form pull-right">
        <input type="text" class="span2">
        <button type="submit" class="btn">Submit</button>
        </form>
        <li><a href="#">Link</a></li>
        <form class="navbar-search pull-left">
        <input type="text" class="search-query" placeholder="Search">
        <button class="btn" style="position: relative;top:-3px;">搜索</button>
        </form>
        <li><a href="#">Link123</a></li>
        </ul>           
        </div>
    </div>

    <!-- 面包屑 -->
    <ul class="breadcrumb">
    <li><a href="#">首页</a> <span class="divider">/</span></li>
    <li><a href="#">Library</a> <span class="divider">/</span></li>
    <li class="active">Data</li>
    </ul>

    <!-- 标准分页 -->
    <div class="pagination pagination-large pagination-centered">
    <ul>
    <li><a href="#"><<</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li class="active"><a>3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">>></a></li>
    </ul>
    </div>

    <!-- 翻页 -->
    <ul class="pager">
    <li><a href="#">上一页</a></li>
    <li><a href="#">下一页</a></li>
    </ul>

    <ul class="pager">
    <li class="previous">
    <a href="#">&larr; Older</a>
    </li>
    <li class="next">
    <a href="#">Newer &rarr;</a>
    </li>
    </ul>

    <!-- 标签与徽章 -->
    <span class="label">默认</span>
    <span class="label label-success">成功</span>
    <span class="label label-warning">Warning</span>
    <span class="label label-important">Important</span>
    <span class="label label-info">Info</span>
    <span class="label label-inverse">Inverse</span>

    <span class="badge">1</span>
    <span class="badge badge-success">2</span>
    <span class="badge badge-warning">4</span>
    <span class="badge badge-important">6</span>
    <span class="badge badge-info">8</span>
    <span class="badge badge-inverse">10</span>

    <!-- 排版 -hero块 -->
    <div class="hero-unit">
    <h1>Heading</h1>
    <p>Tagline</p>
    <p>
    <a class="btn btn-primary btn-large">
    Learn more
    </a>
    </p>
    </div>

    <!-- 排版 -页面标题 -->
    <div class="page-header">
    <h1>Example page header <small>Subtext for header</small></h1>
    </div>

    <!-- 缩略图 -->
    <ul class="thumbnails">
    <li class="span4">
    <div class="thumbnail">
    <a href=""><img src="img/1.jpg" alt=""></a>
    <h3>Thumbnail label</h3>
    <p>Thumbnail caption...</p>
    </div>
    </li>
    </ul>

    <!-- 警告框 -->
    <div class="alert span6 well">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Warning!</strong> Best check yo self, you're not looking too good.
    </div>

    <div class="alert span6 well alert-success">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Warning!</strong> Best check yo self, you're not looking too good.
    </div>

    <!-- 进度条 -->
    <div class="progress">
    <div class="bar" style="width: 60%;"></div>
    </div>

    <div class="progress progress-striped">
    <div class="bar" style="width: 20%;"></div>
    </div>

    <div class="progress progress-striped active">
    <div class="bar" style="width: 40%;"></div>
    </div>

    <div class="progress">
    <div class="bar bar-success" style="width: 35%;"></div>
    <div class="bar bar-warning" style="width: 20%;"></div>
    <div class="bar bar-danger" style="width: 10%;"></div>
    </div>

    <div class="progress progress-info">
    <div class="bar" style="width: 20%"></div>
    </div>
    <div class="progress progress-success">
    <div class="bar" style="width: 40%"></div>
    </div>
    <div class="progress progress-warning">
    <div class="bar" style="width: 60%"></div>
    </div>
    <div class="progress progress-danger">
    <div class="bar" style="width: 80%"></div>
    </div>

    <div class="progress progress-info progress-striped active">
    <div class="bar" style="width: 20%"></div>
    </div>
    <div class="progress progress-success progress-striped">
    <div class="bar" style="width: 40%"></div>
    </div>
    <div class="progress progress-warning progress-striped active">
    <div class="bar" style="width: 60%"></div>
    </div>
    <div class="progress progress-danger progress-striped">
    <div class="bar" style="width: 80%"></div>
    </div>

    <!-- 对话框 -->      

    <!-- 动态触发模态对话框 -->
    <!-- Button to trigger modal -->
    <button data-toggle="modal" data-target="#myModal">BUTTON弹出框</button>
    <a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal">a链接弹出</a>
    <button class="btn btn-primary" onclick="show()">BUTTON弹出加载其他网页</button>
    <a href="remote.html" class="btn" data-toggle="modal" data-target="#baidu">a远程加载</a>
    <button class="btn" onclick="show()">js弹出</button>
    <script type="text/javascript">
        function show(){
            $('#baidu').modal({
                remote: 'remote.html'
            });
        }
    </script>
     
    <div id="baidu" class="modal hide fade">
        <div class="modal-body">
            fdafd
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
        </div>
    </div>
    <!-- Modal -->
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
    <p>One fine body…</p>
    </div>
    <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
    <button class="btn btn-primary">Save changes</button>
    </div>
    </div>

    <!-- 标签页下拉菜单 -->
    <ul class="nav nav-pills">
    <li class="dropdown active">
    <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    Dropdown
    <b class="caret"></b>
    </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a href="#">Action</a></li>
    </ul>
    </li>
    </ul>

    <!-- 滚动监听 -->
    <div class="navbar navbar-static" id="navbarExample">
      <div class="navbar-inner">
        <div style="width: auto;" class="container">
          <a href="#" class="brand">Project Name</a>
          <ul class="nav">
            <li class=""><a href="#fat">@fat</a></li>
            <li class=""><a href="#mdo">@mdo</a></li>
            <li class="dropdown">
              <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li class=""><a href="#one">one</a></li>
                <li class=""><a href="#two">two</a></li>
                <li class="divider"></li>
                <li class=""><a href="#three">three</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div style="height:200px;overflow:auto;" data-offset="0" data-target="#navbarExample" data-spy="scroll">
              <h4 id="fat">@fat</h4>
              <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
              <h4 id="mdo">@mdo</h4>
              <p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
              <h4 id="one">one</h4>
              <p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p>
              <h4 id="two">two</h4>
              <p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p>
              <h4 id="three">three</h4>
              <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
              <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
              </p>
    </div>


    <ul class="nav nav-tabs" id="myTab">
      <li class="active"><a data-toggle="tab" href="#home">首页</a></li>
      <li class=""><a data-toggle="tab" href="#profile">Profile</a></li>
      <li class="dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li class=""><a data-toggle="tab" href="#dropdown1">@fat</a></li>
          <li class=""><a data-toggle="tab" href="#dropdown2">@mdo</a></li>
        </ul>
      </li>
    </ul>
    <div class="tab-content" id="myTabContent">
              <div id="home" class="tab-pane fade active in">
                <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
              </div>
              <div id="profile" class="tab-pane fade">
                <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
              </div>
              <div id="dropdown1" class="tab-pane fade">
                <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
              </div>
              <div id="dropdown2" class="tab-pane fade">
                <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
              </div>
    </div>

    <!-- 工具提示 -->
    <ul class="nav nav-pills">
          <a title="" data-placement="top" data-toggle="tooltip" href="" data-original-title="Tooltip on top">Tooltip on top</a>
          <a title="" data-placement="right" data-toggle="tooltip" href="#" data-original-title="Tooltip on right">Tooltip on right</a>
          <a title="" data-placement="bottom" data-toggle="tooltip" href="#" data-original-title="Tooltip on bottom">Tooltip on bottom</a>
          <a title="" data-placement="left" data-toggle="tooltip" href="#" data-original-title="Tooltip on left">Tooltip on left</a>
    </ul>
    <script type="text/javascript">
        $('a[data-toggle=tooltip]').tooltip({}); //所有的提示连接应用此方法
    </script>

    <!-- 泡芙效果 -->
    <ul class="nav nav-pills ">
        <a class="span2 btn  btn-success" rel="popover" title="推荐到社交网络" data-content="你以为我会告诉你渣浪老删帖吗？！" data-placement="top"><i class=" icon-white icon-share"></i>  推荐</a>
        <a class="span2 btn  btn-success" rel="popover" title="推荐到社交网络" data-content="你以为我会告诉你渣浪老删帖吗？！" data-placement="right"><i class=" icon-white icon-share"></i>  推荐</a>
        <a class="span2 btn  btn-success" rel="popover" title="推荐到社交网络" data-content="你以为我会告诉你渣浪老删帖吗？！" data-placement="bottom"><i class=" icon-white icon-share"></i>  推荐</a>
        <a class="span2 btn  btn-success" rel="popover" title="推荐到社交网络" data-content="你以为我会告诉你渣浪老删帖吗？！" data-placement="left"><i class=" icon-white icon-share"></i>  推荐</a>
    </ul>
    <script type="text/javascript">
        $("a[rel='popover']").popover();
    </script>

    <!-- 警告消息 -->
    <div class="alert fade in">
        <button data-dismiss="alert" class="close" type="button">×</button>
        <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
    </div>

    <div class="alert alert-block alert-error fade in">
        <button data-dismiss="alert" class="close" type="button">×</button>
        <h4 class="alert-heading">Oh snap! You got an error!</h4>
        <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
        <p>
          <a href="#" class="btn btn-danger">Take this action</a> <a href="#" class="btn">Or do this</a>
        </p>
    </div>

    <!-- 按钮 -->
    <div>
        <button id="fat-btn" type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button>
        <script type="text/javascript">
         $('#fat-btn').click(function () {
            var btn = $(this)
            btn.button('loading')
            setTimeout(function () {
            btn.button('reset')
            }, 3000)
            }); 
        </script>
        <button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button>
        <!-- 多选按钮 -->
        <div class="btn-group" data-toggle="buttons-checkbox">
        <button type="button" class="btn btn-primary active">Left</button>
        <button type="button" class="btn btn-primary">Middle</button>
        <button type="button" class="btn btn-primary">Right</button>
        </div>
        <!-- 单选按钮 -->
        <div class="btn-group" data-toggle="buttons-radio">
        <button type="button" class="btn btn-primary active">Left</button>
        <button type="button" class="btn btn-primary">Middle</button>
        <button type="button" class="btn btn-primary">Right</button>
        </div>
    </div>

    <!-- accordion -->
    <div id="accordion2" class="accordion">
        <div class="accordion-group">
          <div class="accordion-heading">
            <a href="#collapseOne" data-parent="#accordion2" data-toggle="collapse" class="accordion-toggle">
              Collapsible Group Item #1
              <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">+</button>
            </a>
          </div>
          <div class="accordion-body in collapse" id="collapseOne" style="height: auto;">
            <div class="accordion-inner">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
          </div>
        </div>
        <div class="accordion-group">
          <div class="accordion-heading">
            <a href="#collapseTwo" data-parent="#accordion2" data-toggle="collapse" class="accordion-toggle">
              Collapsible Group Item #2
            </a>
          </div>
          <div class="accordion-body collapse in" id="collapseTwo">
            <div class="accordion-inner">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
          </div>
        </div>
        <div class="accordion-group">
          <div class="accordion-heading">
            <a href="#collapseThree" data-parent="#accordion2" data-toggle="collapse" class="accordion-toggle">
              Collapsible Group Item #3
            </a>
          </div>
          <div class="accordion-body collapse" id="collapseThree">
            <div class="accordion-inner">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
          </div>
        </div>
      </div>
    <!-- 按钮控制展开 -->
    <div>
    <button type="button" class="span1 btn btn-danger" data-toggle="collapse" data-target="#demo">展开1</button>   
    <div id="demo" class="offset1 collapse in"> 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 </div></div>
    <div>
    <button type="button" class="span1 btn btn-danger" data-toggle="collapse" data-target="#demo1">展开2</button>   
    <div id="demo1" class="offset1 collapse in"> 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 </div></div>
    <hr>

    <!-- 幻灯片轮播 -->
    <div class="carousel slide" id="myCarousel">
        <ol class="carousel-indicators">
          <li data-slide-to="0" data-target="#myCarousel" class="active"></li>
          <li data-slide-to="1" data-target="#myCarousel" class=""></li>
          <li data-slide-to="2" data-target="#myCarousel" class=""></li>
          <li data-slide-to="3" data-target="#myCarousel" class=""></li>
        </ol>
        <div class="carousel-inner">
          <div class="item active">
            <img alt="" src="img/1.jpg">
            <div class="carousel-caption">
              <h4>First Thumbnail label</h4>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            </div>
          </div>
          <div class="item">
            <a href=""><img alt="" src="img/2.jpg"></a>
            <div class="carousel-caption">
              <h4>Second Thumbnail label</h4>
              <p>Cras justo odio.</p>
            </div>
          </div>
          <div class="item">
            <img alt="" src="img/3.jpg">
            <div class="carousel-caption">
              <h4>Third Thumbnail label</h4>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            </div>
          </div>
          <div class="item">
            <img alt="" src="img/city.jpg">
            <div class="carousel-caption">
              <p>Cras justo odio.</p>
            </div>
          </div>
        </div>
        <a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
        <a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
      </div>
      <script type="text/javascript">
        $("#myCarousel").carousel(); //启动轮播
      </script>

      <!-- 输入提示 -->
      <input type="text" data-source="[&quot;Alabama&quot;,&quot;Alaska&quot;,&quot;Arizona&quot;,&quot;Arkansas&quot;,&quot;California&quot;,&quot;Colorado&quot;,&quot;Connecticut&quot;,&quot;Delaware&quot;,&quot;Florida&quot;,&quot;Georgia&quot;,&quot;Hawaii&quot;,&quot;Idaho&quot;,&quot;Illinois&quot;,&quot;Indiana&quot;,&quot;Iowa&quot;,&quot;Kansas&quot;,&quot;Kentucky&quot;,&quot;Louisiana&quot;,&quot;Maine&quot;,&quot;Maryland&quot;,&quot;Massachusetts&quot;,&quot;Michigan&quot;,&quot;Minnesota&quot;,&quot;Mississippi&quot;,&quot;Missouri&quot;,&quot;Montana&quot;,&quot;Nebraska&quot;,&quot;Nevada&quot;,&quot;New Hampshire&quot;,&quot;New Jersey&quot;,&quot;New Mexico&quot;,&quot;New York&quot;,&quot;North Dakota&quot;,&quot;North Carolina&quot;,&quot;Ohio&quot;,&quot;Oklahoma&quot;,&quot;Oregon&quot;,&quot;Pennsylvania&quot;,&quot;Rhode Island&quot;,&quot;South Carolina&quot;,&quot;South Dakota&quot;,&quot;Tennessee&quot;,&quot;Texas&quot;,&quot;Utah&quot;,&quot;Vermont&quot;,&quot;Virginia&quot;,&quot;Washington&quot;,&quot;West Virginia&quot;,&quot;Wisconsin&quot;,&quot;Wyoming&quot;]" data-items="6" data-provide="typeahead" style="margin: 0 auto;" class="span3" autocomplete="off">
      <button id="scrollUp" class="btn"></button>
      <script type="text/javascript">
            $.scrollUp({
                scrollName: 'scrollUp',
                topDistance: '300', // Distance from top before showing element (px)
                topSpeed: 500, // Speed back to top (ms)
                animation: 'fade', // Fade, slide, none
                animationInSpeed: 200, // Animation in speed (ms)
                animationOutSpeed: 200, // Animation out speed (ms)
                scrollText: '回到顶部', // Text for element
                scrollImg: false,
                activeOverlay: false // Set CSS color to display scrollUp active point, e.g '#00FFFF'
            });
      </script>
      <hr>

      <!-- 附加导航 -->
      <div id="myaffix">
        <ul id="example" class="nav nav-list affix" style="">
          <li><a href="#overview"> <i class="icon-chevron-right"></i>概览</a></li>
          <li><a href="#transitions"><i class="icon-chevron-right"></i> 过渡效果</a></li>
          <li><a href="#modals"><i class="icon-chevron-right"></i> 模态对话框</a></li>
          <li><a href="#dropdowns"><i class="icon-chevron-right"></i> 下拉菜单</a></li>
          <li><a href="#scrollspy"><i class="icon-chevron-right"></i> 滚动监听</a></li>
          <li><a href="#tabs"><i class="icon-chevron-right"></i> 标签页</a></li>
          <li><a href="#tooltips"><i class="icon-chevron-right"></i> 工具提示</a></li>
          <li><a href="#popovers"><i class="icon-chevron-right"></i> 弹出提示</a></li>
          <li><a href="#alerts"><i class="icon-chevron-right"></i> 警告框</a></li>
          <li><a href="#buttons"><i class="icon-chevron-right"></i> 按钮</a></li>
          <li><a href="#collapse"><i class="icon-chevron-right"></i> Collapse</a></li>
          <li class=""><a href="#carousel"><i class="icon-chevron-right"></i> 轮播</a></li>
          <li class="active"><a href="#typeahead"><i class="icon-chevron-right"></i> 输入提示</a></li>
          <li class=""><a href="#affix"><i class="icon-chevron-right"></i> 附加导航</a></li>
        </ul>
      </div>
      <script type="text/javascript">
        
      </script>
</div>
</div>
</body>
</html>